<template>
	<el-card>
		<div v-if="key == this.routePath.defaultPath">
			<!-- 搜索 -->
			<el-form :inline="true" :model="searchForm">
				<el-form-item label="用户编号">
					<el-input placeholder="请输入搜索内容" v-model="searchForm.userCode"></el-input>
				</el-form-item>
				<el-form-item label="用户昵称">
					<el-input placeholder="请输入搜索内容" v-model="searchForm.userNickName"></el-input>
				</el-form-item>
				<el-form-item label="手机号">
					<el-input placeholder="请输入搜索内容" v-model="searchForm.userPhone"></el-input>
				</el-form-item>
				<el-form-item>
					<!-- v-if="permission_add"  -->
					<el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleSearch" >搜索</el-button>
					<el-button class="filter-item"  type="primary" icon="el-icon-plus"  @click="handleCreate" >新增</el-button>
				</el-form-item>
			</el-form>
			<!-- 列表 -->
			<el-table :data="dataList" minheight="calc(100VH - 270px)" highlight-current-row border style="width: 100%" v-loading="loading">
				<el-table-column label="序号"  type="index" align="center" width="50"></el-table-column>
				<el-table-column label="用户编号" prop="userCode" align="center" width="150"></el-table-column>
				<el-table-column label="用户昵称" prop="userNickName" align="center" width="150"></el-table-column>
				<el-table-column label="电子邮件" prop="userEmail" align="center" min-width width="180"></el-table-column>
				<el-table-column label="用户手机号" prop="userPhone" align="center" width="120"></el-table-column>
				<el-table-column label="用户性别" prop="userSex" align="center" width="120">
					<template slot-scope="scope">
						{{scope.row.userSex == "1" ?"男" : scope.row.userSex == "2" ? "女"  : '保密'}}
					</template>
				</el-table-column>
				<el-table-column label="用户头像" prop="userAvatar" align="center" width="120">
					<template slot-scope="scope">
						<img :src="scope.row.userAvatar"/>
					</template>
				</el-table-column>
				<el-table-column label="用户状态" prop="userStatus" width="140" align="center">
					<template slot-scope="scope">
						<el-switch
						@change="handleStatusChange(scope.$index, scope.row)"
						:active-value="1"
						:inactive-value="2"
						v-model="scope.row.userStatus">
						</el-switch>
					</template>
				</el-table-column>
				<!-- <template v-if="permission_bind_role"> -->
					<el-table-column label="设置" align="center" width="120" fixed="right">
						<template slot-scope="scope">
							<el-button type="text" size="small" @click="handleBindRole(scope.row.id)">分配角色</el-button>
						</template>
					</el-table-column>
				<!-- </template> -->
				<el-table-column label="操作" align="center" width="150" fixed="right">
					<template slot-scope="scope">
						<el-button v-if="permission_view"  type="text" size="small" @click="handleView(scope.row.id)">查看</el-button>
						<el-button v-if="permission_edit"  type="text" size="small" @click="handleEdit(scope.row.id)">修改</el-button>
						<el-button v-if="permission_delete" type="text" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<div v-show="!loading" class="pagination-container">
				<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="pageForm.pageNum" 
					:page-sizes="pageForm.pageSizeSelect"
					:page-size="pageForm.pageSize"
					:total="pageForm.totalData"
					layout="total, sizes, prev, pager, next, jumper" 
					:prev-text = "pageForm.prevText"
					:next-text = "pageForm.nextText"
				>
				</el-pagination>
			</div>
		</div>
		<div v-else>
			<router-view :key="key"></router-view>
		</div>
	</el-card>
</template>

<script>
import { mapGetters } from 'vuex'
import { findSystemUserList ,deleteSystemUser ,modifyUserStatus} from '@/api/admin/systemUser'
export default{
	name: 'user',
	data() {
		return {
			// 默认加载弹出层
			loading:true,
			routePath:{
				defaultPath: '/base/user',
				addPath: '/base/user/add',
				editPath: '/base/user/edit',
				viewPath: '/base/user/view',
				bindRolePath: '/base/user/bindrole'
			},
			// 数据列表el-table
			dataList: [],
			// 权限按钮控制
			permission_add:false,
			permission_edit:false,
			permission_delete:false,
			permission_view:false,
			permission_bind_role: false,
			// 搜索条件
			searchForm:{
				userNickName: '',
				userPhone: '',
				userCode: '',
				pageNum: 1,
				pageSize: 10
			},
			//分页相关
			pageForm:{
				pageSizeSelect: [10,20,30,50],//每页显示个数选择器的选项设置
				totalData: 0, //总条数
				pageSize: 10, //每页显示条目个数
				pageNum: 1 ,//当前页
				prevText: '上一页', //替代图标显示的上一页文字
				nextText: '下一页' //替代图标显示的下一页文字
			}
		}
	},
	computed:{
		key() {
			return this.$route.path
		},
		...mapGetters([
			'elementList'
		])
	},
	created(){
		// 初始化获取数据列表
		if( this.$route.path === this.routePath.defaultPath){
			this.getDateList()
			//初始化按钮权限
			this.permission_add = this.elementList['base:user:add']
			this.permission_edit = this.elementList['base:user:edit']
			this.permission_delete = this.elementList['base:user:delete']
			this.permission_view = this.elementList['base:user:detail']
			this.permission_bind_role = this.elementList['base:user:bind:role']
		}
	},
	methods:{
		// 方法集合
		getDateList(){
			this.loading = true
			console.log(this.searchForm)
			findSystemUserList(this.searchForm).then(res => {
				this.dataList = res.data.responseData
				this.pageForm.totalData = parseInt(res.data.total)
			})
			this.loading = false
		},
		handleView(val){
			this.$router.push({path:this.routePath.viewPath,query:{id:val}});
		},
		handleEdit(val){
			this.$router.push({path:this.routePath.editPath,query:{id:val}});
		},
		handleDelete(val){
			this.$confirm('此操作将永久删除, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				deleteSystemUser(val).then(() => {
					this.$notify({
						title: '成功',
						message: '删除成功',
						type: 'success',
						duration: 2000,
						onClose: this.getDateList()
					});
				});
			});
		},
		handleCreate(){
			this.$router.push({path:this.routePath.addPath});
		},
		handleSearch(){
			this.getDateList();
		},
		handleBindRole(val){
			this.$router.push({path:this.routePath.bindRolePath,query:{id:val}});
		},
		handleSizeChange(val){
			this.searchForm.pageSize = val;
			this.getDateList();
		},
		handleCurrentChange(val){
			this.searchForm.pageNum = val;
			this.getDateList();
		},
		handleStatusChange(index, row){
			this.$confirm('是否要修改该状态?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				let data = {
					userId: row.id,
					userStatus: row.userStatus
				}
				modifyUserStatus(data).then(() => {
					this.$message({
						type: 'success',
						message: '修改成功!'
					});
				});
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '取消修改'
				});
				this.getDateList();
			});
		}
	}
}
</script>

<style>
</style>
